
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家居家具管理系统</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::datepicker -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/datepicker/daterangepicker.css">
    <!-- begin::datepicker -->

    <!-- begin::vmap -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/vmap/jqvmap.min.css">
    <!-- begin::vmap -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="${APP_PATH}/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>加载中 ...</span>
</div>
<!-- end::page loader -->



<!-- begin::navigation -->
<jsp:include page="/WEB-INF/jsps/Manager/common/navigation.jsp"/>
<!-- end::navigation -->

<!-- begin::top -->
<jsp:include page="/WEB-INF/jsps/Manager/common/top.jsp"/>
<!-- end::top -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <div>
                <h4>Sales</h4>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Sales</li>
                    </ol>
                </nav>
            </div>
            <div>
                <div class="reportrange btn btn-light">
                    <i class="ti-calendar m-r-10"></i>
                    <span></span>
                    <i class="ti-angle-down m-l-10"></i>
                </div>
            </div>
        </div>
        <!-- end::page header -->

        <div class="row">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6>Conversion Rate</h6>
                                <h4 class="m-b-0 font-weight-bold">
                                    0.32%
                                    <small data-toggle="tooltip" title="Than last week"
                                           class="text-success font-size-11">
                                        1.2%
                                        <i class="ti-arrow-up"></i>
                                    </small>
                                </h4>
                            </div>
                            <div>
                                <span class="pie"
                                      data-peity='{ "fill": ["#5d78ff", "#eeeeee"], "radius": 30 }'>1/5</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6>Unique Purchases</h6>
                                <h4 class="m-b-0 font-weight-bold">
                                    3,137
                                    <small data-toggle="tooltip" title="Than last week"
                                           class="text-danger font-size-11">
                                        0.2%
                                        <i class="ti-arrow-down"></i>
                                    </small>
                                </h4>
                            </div>
                            <div>
                                <span class="pie"
                                      data-peity='{ "fill": ["#0abb87", "#eeeeee"], "radius": 30 }'>226/360</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6>Avg. Order Value</h6>
                                <h4 class="m-b-0 font-weight-bold">
                                    $306.20
                                    <small data-toggle="tooltip" title="Than last week"
                                           class="text-danger font-size-11">
                                        2.1%
                                        <i class="ti-arrow-down"></i>
                                    </small>
                                </h4>
                            </div>
                            <div>
                                <span class="pie"
                                      data-peity='{ "fill": ["#ea4141", "#eeeeee"], "radius": 30 }'>1,4</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6>Order Quantity</h6>
                                <h4 class="m-b-0 font-weight-bold">
                                    1,650
                                    <small data-toggle="tooltip" title="Than last week"
                                           class="text-success font-size-11">
                                        1.2%
                                        <i class="ti-arrow-up"></i>
                                    </small>
                                </h4>
                            </div>
                            <div>
                                <span class="pie" data-peity='{ "fill": ["#3a3f51", "#eeeeee"], "radius": 30 }'>0.52,1.041</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-md-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="card-title">Sales Report</h5>
                                <h6 class="card-subtitle">Sales graph of last 7 months</h6>
                            </div>
                            <div class="reportrange btn btn-sm btn-light">
                                <i class="ti-calendar m-r-10"></i>
                                <span></span>
                                <i class="ti-angle-down m-l-10"></i>
                            </div>
                            <div class="d-lg-none d-sm-block m-t-15"></div>
                        </div>
                        <div class="row m-b-20">
                            <div class="col-md-6">
                                <div class="bg-light text-success p-15 text-center m-b-10">
                                    <h4 class="font-weight-bold">$560.234,076</h4>
                                    <h6 class="m-b-0">Total Sales</h6>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="bg-light text-warning p-15 text-center m-b-10">
                                    <h4 class="font-weight-bold">$620,076</h4>
                                    <h6 class="m-b-0">Average</h6>
                                </div>
                            </div>
                        </div>
                        <canvas id="chartjs_one"></canvas>
                    </div>
                </div>

            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h5 class="card-title">Regional Sales</h5>
                                <h6 class="card-subtitle">Graph of total sales of regions. Total and returned
                                    sales.</h6>
                            </div>
                            <div>
                                <div class="btn-group">
                                    <button class="btn btn-light btn-sm active">Yearly</button>
                                    <button class="btn btn-light btn-sm">Monthly</button>
                                </div>
                            </div>
                        </div>
                        <canvas id="chartjs_two"></canvas>
                        <div class="row text-center m-t-20">
                            <div class="col-md-4 m-t-20">
                                <h4 class="font-weight-bold text-primary">$34.234,076</h4>
                                <h6 class="m-b-0">Total Sales</h6>
                            </div>
                            <div class="col-md-4 m-t-20">
                                <h4 class="font-weight-bold text-warning">$1.620,076</h4>
                                <h6 class="m-b-0">Average</h6>
                            </div>
                            <div class="col-md-4 m-t-20">
                                <h4 class="font-weight-bold text-danger">$20,076</h4>
                                <h6 class="m-b-0">Return</h6>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>



        <!-- begin::bottom -->
        <div class="card-group">
            <jsp:include page="/WEB-INF/jsps/Manager/common/bottom.jsp"/>
        </div>
        <!-- end::bottom -->

    </div>

</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="${APP_PATH}/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::charts -->
<script src="${APP_PATH}/assets/vendors/charts/chartjs/chart.min.js"></script>
<script src="${APP_PATH}/assets/vendors/charts/peity/jquery.peity.min.js"></script>
<script src="${APP_PATH}/assets/js/examples/charts/chartjs.js"></script>
<script src="${APP_PATH}/assets/js/examples/charts/peity.js"></script>
<!-- end::charts -->

<!-- begin::daterangepicker -->
<script src="${APP_PATH}/assets/vendors/datepicker/daterangepicker.js"></script>
<!-- end::daterangepicker -->

<!-- begin::dashboard -->
<script src="${APP_PATH}/assets/js/examples/dashboard.js"></script>
<!-- end::dashboard -->

<!-- begin::vamp -->
<script src="${APP_PATH}/assets/vendors/vmap/jquery.vmap.min.js"></script>
<script src="${APP_PATH}/assets/vendors/vmap/maps/jquery.vmap.usa.js"></script>
<script src="${APP_PATH}/assets/js/examples/vmap.js"></script>
<!-- end::vamp -->

<!-- begin::custom scripts -->
<script src="${APP_PATH}/assets/js/custom.js"></script>
<script src="${APP_PATH}/assets/js/app.js"></script>
<!-- end::custom scripts -->
<script>

</script>
</body>
</html>
